<template>
	<view class="content">
		<view class="main">
			<view class="broadInfo-item">
				<view class="title">直播主题:</view>
				<view class="text">{{ broadInfo.name || "暂无" }}</view>
			</view>
			<view class="broadInfo-item">
				<view class="title">直播时间</view>
				<view class="text">{{ broadInfo.startTime }} ~ {{ broadInfo.endTime || "--" }}</view>
			</view>
			<view class="broadInfo-item">
				<view class="title">直播描述</view>
				<view class="text">{{ broadInfo.roomDetail }}</view>
			</view>
			<view class="broadInfo-item">
				<view class="title">直播房间号</view>
				<view class="text">{{ broadInfo.roomId }}</view>
			</view>
			<view class="broadInfo-item">
				<view class="title">直播地址</view>
				<view class="text address">
					<text>https://health-2.westts.cn/#/home?roomId={{ broadInfo.roomId }}</text>
				</view>
			</view>
			<view class="broadInfo-item">
				<view class="title">直播状态</view>
				<view class="text reason">{{ statusLabel(broadInfo.status) }}</view>
			</view>
			<view class="btnBox" v-if="broadInfo.status == 'BANNEDs'">
				<u-button @click="show=true" class='btn1' type="error" shape="circle">申诉</u-button>
			</view>
		</view>
		<u-mask :show="show" :mask-click-able='false'>
			<view class="explainBox">
				<view class="explainBox-title">
					<view class="titleText">立即申述</view>
					<image @click="handleCencel" class="delImg" src="@/static/img/common/del.png" mode=""></image>
				</view>
				<view class="textAreaBox">
					<u-input v-model="reason" placeholder='请填写申诉理由' type='textarea' :height="331" :auto-height="true" />
				</view>
				<view class="explainBox-btns">
					<u-button  class='explainBox-btn' @click="handleCencel">取消</u-button>
					<u-button  class='explainBox-btn' @click="submitForm" type="error" >提交</u-button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false, // 申诉弹窗
				reason: '',// 申诉理由
				broadInfo: {},
				liveStatus:[
				  {value: "ONGOING", label: "直播中" },
				  {value: "NOT_StARTED", label: "未开始" },
				  {value: "CLOSED", label: "已结束" },
				  {value: "BANNED", label: "已禁播" },
				]
			};
		},
		onLoad(options) {
			let row = JSON.parse(options.val);
			this.broadInfo = row;
		},
		methods: {
			// 关闭弹窗
			handleCencel() {
				this.show = false
				this.reason = ''
			},
			// 直播状态
			statusLabel(v) {
				return this.liveStatus.find(i=>i.value == v).label
			},
			  submitForm() {
				if (!this.reason) {
				  this.$u.toast("请填写申诉理由");
				  return;
				}
				let data = {
				  appealReason: this.reason
				};
				uni.request({
				  url: api.expert + "/expert/broadcast/appeal",
				  header: {
					'accessToken': storage.getAccessToken(),
					'refreshToken': storage.getRefreshToken()
				  },
				  method: "POST",
				  data,
				  success: ({ data }) => {
					if (data.success) {
					  console.log("已申诉");
					}
				  }
				});
			  },
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 37rpx 30rpx;
	}
.explainBox {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 670rpx;
	height: 620rpx;
	border-radius: 10px;
	background-color: #fff;
	padding: 40rpx;
	.explainBox-title {
		display: flex;
		justify-content: space-between;
		.titleText {
			font-size: 32rpx;
			font-weight: bold;
		}
		.delImg {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.textAreaBox {
		border: 1px solid #C8C8C8;
		padding: 10rpx 12rpx;
		border-radius: 16rpx;
		margin: 25rpx 0;
	}
	.explainBox-btns{
		display: flex;
		justify-content: flex-end;
		width: 100%;
		.explainBox-btn {
			margin: 0;
			margin-left: 30rpx;
		}
	}
}

	.btnBox {
		position: fixed;
		background-color: #f5f5f5;
		width: 100%;
		bottom: 10rpx;
		padding: 0 30rpx;
		left: 0;
		.btn1 {
			height: 90rpx
			
		}
	}

	.main {
		padding: 25rpx;
		border-radius: 14rpx;
		background-color: #fff;
	}

	.broadInfo-item {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		padding: 40rpx 0;
		border-bottom: 1px solid #E3E3E3;

		&:last-child {
			border: none;
		}

		.title {
			width: 200rpx;
			color: #aaa;
		}

		.text {
			width: 450rpx;
			text-align: right;
		}

		.address {
			color: #2F7DE7;
		}

		.reason {
			color: red;
		}
	}
</style>
